<template>
  <div class="czr-content" :class="{'czr-content-full': full !== false}">
    <div name="czr-table-resize-dom" class="cc-top-slot" v-if="$slots.top">
      <slot name="top"/>
    </div>
    <div name="czr-table-resize-dom" class="cc-field-out" id="field-out" v-if="$slots.fieldOut">
      <div class="field-out-slot czr-content-form">
        <slot name="fieldOut"/>
      </div>
    </div>
    <div name="czr-table-resize-dom" class="cc-center-slot" v-if="$slots.center">
      <slot name="center"/>
    </div>
    <div name="czr-table-resize-dom" class="cc-bottom">
      <div id="operation" class="operation" v-if="$slots.buttons || noFilter === false">
        <div class="table-title">
          <slot name="tableTitle"/>
        </div>
        <div class="buttons">
          <slot name="buttons"/>
        </div>
        <div class="filters" v-if="noFilter === false">
          <div class="tools __hover" @click="state.showFieldColumn = true">
            <SvgIcon name="czr_tools" size="18" color="#666666"/>
          </div>
        </div>
        <div class="filters-right" :style="`margin-left : ${(noFilter === false || $slots.buttons) ? 10 : 0}px`">
          <slot name="filtersRight"/>
        </div>
      </div>
      <div id="table" class="table">
        <slot name="table"/>
      </div>
    </div>
    <el-dialog
        v-model="state.showFieldColumn"
        width="790px"
        align-center
        modal-class="field-dialog"
        :close-on-click-modal="false"
        :show-close="false"
    >
      <template #header>
        <span>字段筛选设置</span>
        <SvgIcon class="__hover" name="close_2" size="16" @click="state.showFieldColumn = false"/>
      </template>
      <div class="field-column">
        <div class="fc-block fc-all">
          <div class="fcb-title">全部字段</div>
          <div class="fcb-content">
            <div class="fcbc-filter">
              <el-input v-model="state.columnAllInputFilter" placeholder="请输入关键词..." clearable>
                <template #suffix>
                  <SvgIcon name="czr_search"/>
                </template>
              </el-input>
            </div>
            <div class="fcbc-list">
              <template v-for="(item, index) in tableHeadTempDeep.filter(v => v.allLabel.includes(state.columnAllInputFilter))" :key="item.allLabel">
                <div class="table-head-item __hover" @click="item.show = !item.show">
                  <div class="check" :class="{active: item.show}"/>
                  <CzrEllipsis class="label" :value="item.allLabel"/>
                </div>
              </template>
            </div>
            <div class="fcbc-bottom">
              <div>共 {{ tableHeadTempDeep.length }} 条</div>
              <div class="__hover" @click="handleCheckAllChange">
                <div class="check" :class="{active: columnIsAllCpt}"/>全选
              </div>
            </div>
          </div>
        </div>
        <div class="fc-block fc-select">
          <div class="fcb-title">已选字段</div>
          <div class="fcb-content">
            <div class="fcbc-filter">
              <el-input v-model="state.columnSelectInputFilter" placeholder="请输入关键词..." clearable>
                <template #suffix>
                  <SvgIcon name="czr_search"/>
                </template>
              </el-input>
            </div>
            <div class="fcbc-list">
              <template v-for="(item, index) in tableHeadTempDeep.filter(v => v.show && v.allLabel.includes(state.columnSelectInputFilter))" :key="item.allLabel">
                <div class="table-head-select-item">
                  <SvgIcon name="czr_prefix" size="12" color="#e4e4e4"/>
                  <CzrEllipsis class="label" :value="item.allLabel"/>
                  <SvgIcon class="__hover" name="czr_close" size="12" color="#e4e4e4" @click="item.show = false"/>
                </div>
              </template>
            </div>
            <div class="fcbc-bottom">
              <div>已选 {{ tableHeadTempDeep.filter(v => v.show).length }} 条</div>
              <div v-if="tableHeadTempDeep.filter(v => v.show).length > 0" @click="tableHeadTempDeep.forEach(v => v.show = false)" class="clear __hover">清空</div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="buttons">
          <div class="cancel __hover" @click="state.showFieldColumn = false">取消</div>
          <div class="submit __hover" @click="$emit('update:tableHead', state.tableHeadTemp), state.showFieldColumn = false">确定</div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrContent',
});
import {
    computed,
    onMounted,
    reactive,
    watch,
  } from 'vue'

const props = defineProps({
  tableHead: {
    default: () => []
  },
  full: {
    default: false
  },
  noFilter: {
    default: false
  }
})
const state = reactive({
  showFieldColumn: false,
  columnAllInputFilter: '',
  columnSelectInputFilter: '',
  tableHeadTemp: [],
});
watch(() => state.showFieldColumn, (n) => {
  if (n) {
    state.tableHeadTemp = JSON.parse(JSON.stringify(props.tableHead))
  }
})
const tableHeadTempDeep = computed(() => {
  const list: any = []
  const deep = (arr: any[], pLabel: string = '') => {
    arr.forEach(v => {
      v.allLabel = pLabel ? `${pLabel}-${v.label}` : v.label
      if (!v.tempFixed && v.fixed) {
        v.tempFixed = JSON.parse(JSON.stringify(v.fixed))
      }
      if (v.children && v.children.length > 0) {
        deep(v.children, v.allLabel)
      } else {
        list.push(v)
      }
    })
  }
  deep(state.tableHeadTemp)
  return list
})

const columnIsAllCpt = computed(() => {
  return tableHeadTempDeep.value.every(v => v.show)
})

const handleCheckAllChange = () => {
  if (columnIsAllCpt.value) {
    tableHeadTempDeep.value.forEach(v => {
      v.show = false
    })
  } else {
    tableHeadTempDeep.value.forEach(v => {
      v.show = true
    })
  }
}
onMounted(() => {
  state.tableHeadTemp = JSON.parse(JSON.stringify(props.tableHead))
})
</script>

<style scoped lang="scss">
  .czr-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F5FBFF;
    box-sizing: border-box;
    .cc-top-slot {
      background-color: #FFFFFF;
    }
    .cc-field-out {
      border-radius: 8px 8px 0 0;
      background-color: #FFFFFF;
      height: auto;
      padding: 14px 24px 0 0;
      .field-out-slot {
        flex: 1;
        :deep(.el-form-item) {
          margin-bottom: 12px;
        }
      }
    }
    .cc-center-slot {
      margin-bottom: 10px;
      background-color: #FFFFFF;
    }
    .cc-bottom {
      border-radius: 0 0 8px 8px;
      background-color: #FFFFFF;
      flex: 1;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 12px 16px;
      .operation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        .table-title {
          margin-right: auto;
          display: flex;
          align-items: center;
        }
        .buttons {
          margin-left: auto;
          display: flex;
          :deep(>*) {
            margin-right: 10px;
          }
        }
        .filters {
          height: 36px;
          display: flex;
          align-items: center;
          :deep(.el-dropdown) {
            .tools {
              width: 36px;
              height: 36px;
              box-sizing: border-box;
              border-radius: 4px;
              border: 1px solid #E4E4E4;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .el-dropdown-menu {
              padding: 8px 4px;
            }
            .el-dropdown-menu__item {
              padding: 0;
              .tools-item {
                padding: 0 8px;
                display: flex;
                align-items: center;
                width: 170px;
                height: 40px;
                box-sizing: border-box;
                .svg-icon {
                  margin-right: 8px;
                }
              }
            }
          }
        }
      }
      .table {
        flex: 1;
        z-index: 1;
        display: flex;
      }
    }
    :deep(.field-dialog) {
      .el-overlay-dialog {
        overflow: hidden;
        .el-dialog {
          border-radius: 8px;
          .el-dialog__header {
            padding: 30px 28px 38px 28px;
            margin: 0;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            display: flex;
            justify-content: space-between;
          }
          .el-dialog__body {
            padding: 0 28px;
          }
          .el-dialog__footer {
            padding: 22px 28px 20px 28px;
            .buttons {
              width: 100%;
              display: flex;
              justify-content: flex-end;
              >div {
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
              }
              .cancel {
                margin-right: 10px;
                width: 72px;
                height: 36px;
                background: #F8F8F8;
                border: 1px solid #E4E4E4;
                border-radius: 4px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
              }
              .submit {
                width: 72px;
                height: 36px;
                background: var(--czr-main-color);
                border-radius: 4px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
              }
            }
          }
        }
      }
    }
    .field-column {
      display: flex;
      justify-content: space-between;
      .fc-block {
        .fcb-title {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          margin-bottom: 18px;
        }
        .fcb-content {
          height: 488px;
          border: 1px solid #E4E4E4;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          .fcbc-filter {
            padding: 10px 12px 0 12px;
          }
          .check {
            width: 18px;
            height: 18px;
            box-sizing: border-box;
            border: 1px solid #d3d3d3;
            border-radius: 2px;
            margin: 0 10px;
            cursor: pointer;
            font-size: 16px;
            &.active {
              background-color: var(--czr-main-color);
              border-color: var(--czr-main-color);
              display: grid;
              place-items: center;
              &:after {
                content: '✔';
                color: #ffffff;
                font-size: 14px;
              }
            }
            &:hover {
              opacity: 0.8;
            }
          }
          .fcbc-bottom {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            min-height: 40px;
            background: #FFFFFF;
            border-top: 1px solid #E4E4E4;
            border-radius: 0px 0px 4px 4px;
            padding: 0 10px 0 12px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            box-sizing: border-box;
          }
        }
        &.fc-all {
          width: 480px;
          .fcbc-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 20px 12px;
            row-gap: 22px;
            column-gap: 30px;
            overflow-y: auto;
            .table-head-item {
              height: 18px;
              display: flex;
              align-items: center;
              line-height: 1;
              .label {
                width: 164px;
              }
            }
          }
          .fcbc-bottom {
            >div:nth-child(2) {
              display: flex;
              align-items: center;
              .check:after {
                transform: translateY(-2px);
              }
            }
          }
        }
        &.fc-select {
          width: 244px;
          .fcbc-list {
            overflow-y: auto;
            display: grid;
            row-gap: 26px;
            padding: 20px 12px;
            grid-template-columns: repeat(1, 1fr);
            .table-head-select-item {
              display: flex;
              align-items: center;
              .svg-icon:first-child {
                margin-right: 10px;
              }
              .label {
                width: 164px;
              }
              .svg-icon:last-child {
                margin-left: auto;
              }
            }
          }
          .fcbc-bottom {
            .clear {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: var(--czr-main-color);
            }
          }
        }
      }
    }
    &.czr-content-full {
      overflow-y: auto;
      position: absolute;
    }
  }
</style>
